<template>
  <div>
    <el-radio-group v-model="activeCourse" size="medium">
      <template v-for="(item, index) in course">
        <el-radio-button :label="index+1" :key="index">{{ item }}</el-radio-button>
      </template>
    </el-radio-group>
    <div class="sectionSelect">
      <div class="p1">
        <div class="heading">
          <h2 class="h5">章</h2>
          <span class="line" />
        </div>
        <div class="list">
          <ul>
            <li
              v-for="(item1, index1) in testList"
              :key="index1"
              :class="activeChapter==index1?'active':''"
              @click="chapterSelectLi(index1,item1.id)"
            >
              <div v-if="activeEditChapter!== index1">
                <span>{{ item1.name }}</span>
                <div class="editBtn-box">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-edit"
                    @click.stop="chapterEditClick(index1)"
                  />
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click.stop="chapterDeleteClick(index1)"
                  />
                </div>
              </div>

              <div v-if="activeEditChapter== index1" class="editingBox">
                <el-input v-model="chapterEditValue" size="small" class="editInput" />
                <div class="editingBtn">
                  <el-button type="success" size="small" @click.stop="chapterSaveClick(index1)">保存</el-button>
                  <el-button size="small" @click.stop="chapterCancleClick">取消</el-button>
                </div>
              </div>
            </li>
          </ul>
          <div class="addContentBox">
            <span class="addContent-hint">添加章：</span>
            <el-input v-model="chapterValue" clearable class="addContent-input" />
            <el-button size="small" type="success" class="addContent-btn" @click="addChapterSave">添加</el-button>
          </div>
        </div>
      </div>
      <div class="p2">
        <div class="heading">
          <h2 class="h5">节</h2>
          <span class="line"></span>
        </div>
        <div class="list">
          <ul>
            <li
              v-for="(item2, index2) in testList[activeChapter].sectionList"
              :key="index2"
              :class="activeSection==index2?'active':''"
              @click="sectionSelectLi(index2,item2.id)"
            >
              <div v-if="activeEditSection!== index2">
                <span>{{ item2.name }}</span>
                <div class="editBtn-box">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-edit"
                    @click.stop="sectionEditClick(index2)"
                  />
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click.stop="sectionDeleteClick(index2)"
                  />
                </div>
              </div>

              <div v-if="activeEditSection== index2" class="editingBox">
                <el-input v-model="sectionEditValue" size="small" class="editInput" />
                <div class="editingBtn">
                  <el-button type="success" size="small" @click.stop="sectionSaveClick(index2)">保存</el-button>
                  <el-button size="small" @click.stop="sectionCancleClick">取消</el-button>
                </div>
              </div>
            </li>
          </ul>
          <div class="addContentBox">
            <span class="addContent-hint">添加节：</span>
            <el-input v-model="sectionValue" clearable class="addContent-input" />
            <el-button size="small" type="success" class="addContent-btn" @click="addSectionSave">添加</el-button>
          </div>
        </div>
      </div>
      <div class="p3">
        <div class="heading">
          <h2 class="h5">考点</h2>
          <span class="line"></span>
        </div>
        <div class="list">
          <ul>
            <li
              v-for="(item3, index3) in testList[activeChapter].sectionList[activeSection].pointsList"
              :key="index3"
              :class="activePoints==index3?'active':''"
              @click="pointsSelectLi(index3,item3.id)"
            >
              <div v-if="activeEditPoints!== index3">
                <span>{{ item3.name }}</span>
                <div class="editBtn-box">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-edit"
                    @click.stop="pointsEditClick(index3)"
                  />
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click.stop="pointsDeleteClick(index3)"
                  />
                </div>
              </div>

              <div v-if="activeEditPoints== index3" class="editingBox">
                <el-input v-model="pointsEditValue" size="small" class="editInput" />
                <div class="editingBtn">
                  <el-button type="success" size="small" @click.stop="pointsSaveClick(index3)">保存</el-button>
                  <el-button size="small" @click.stop="pointsCancleClick">取消</el-button>
                </div>
              </div>
            </li>
          </ul>
          <div class="addContentBox">
            <span class="addContent-hint">添加考点：</span>
            <el-input v-model="pointsValue" clearable class="addContent-input" />
            <el-button size="small" type="success" class="addContent-btn" @click="addPointsSave">添加</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      course: [],
      activeCourse: 1,
      // li点击样式
      activeChapter: 0,
      activeSection: 0,
      activePoints: 0,
      // 当前编辑项
      activeEditChapter: -1,
      activeEditSection: -1,
      activeEditPoints: -1,
      // 修改章节考点input绑定值
      chapterEditValue: '',
      sectionEditValue: '',
      pointsEditValue: '',
      // 添加章节考点input绑定值
      chapterValue: '',
      sectionValue: '',
      pointsValue: '',
      testList: [
        {
          id: 1,
          name: '课程管理第一章',
          sectionList: [
            {
              id: 11,
              name: '课程管理第一节',
              pointsList: [
                {
                  id: 111,
                  name: '课程管理第一考点'
                },
                {
                  id: 112,
                  name: '课程管理第二考点'
                }
              ]
            },
            {
              id: 12,
              name: '课程管理第二节',
              pointsList: [
                {
                  id: 123,
                  name: '第二节第一考点'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '阶段冲刺第一章',
          sectionList: [
            {
              id: 11,
              name: '阶段冲刺第一节'
            },
          ]
        }
      ]
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.course = this.$route.query.course
      console.log(this.course)
    },
    // 节点编辑重置
    resetEdit() {
      this.activeEditChapter = -1
      this.activeEditSection = -1
      this.activeEditPoints = -1
    },
    // 选取章事件
    chapterEditClick(index) {
      this.activeEditChapter = index
    },
    chapterDeleteClick(index) {
      this.$confirm('确定要删除该科目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.testList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    chapterSaveClick() {
      this.activeEditChapter = -1
    },
    chapterCancleClick() {
      this.activeEditChapter = -1
    },
    addChapterSave() { },
    chapterSelectLi(num, ID) {
      this.resetEdit()
      this.activeSection = 0
      this.activePoints = 0
      this.activeChapter = num
      this.testList.map((item, index) => {
        if (item.id === ID) {
          this.activeChapter = index
          return
        }
      })
    },
    // 选取节事件
    sectionEditClick(index) {
      this.activeEditSection = index
    },
    sectionDeleteClick(index) {
      this.$confirm('确定要删除该科目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.testList[this.activeChapter].sectionList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    sectionSaveClick() {
      this.activeEditSection = -1
    },
    sectionCancleClick() {
      this.activeEditSection = -1
    },
    addSectionSave() { },
    sectionSelectLi(num, ID) {
      this.resetEdit()
      this.activeSection = num
      this.testList[this.activeChapter].sectionList.map((item, index) => {
        if (item.id === ID) {
          this.activeSection = index
          return
        }
      })
    },
    // 选取考点事件
    pointsEditClick(index) {
      this.activeEditPoints = index
    },
    pointsDeleteClick(index) {
      this.$confirm('确定要删除该科目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.testList[this.activeChapter].sectionList[this.activeSection].pointsList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    pointsSaveClick() {
      this.activeEditPoints = -1
    },
    pointsCancleClick() {
      this.activeEditPoints = -1
    },
    addPointsSave() { },
    pointsSelectLi(num, ID) {
      this.resetEdit()
      this.activePoints = num
    }
  }
}
</script>
<style lang="scss" scoped>
.sectionSelect {
  margin: 0 auto;
  .p1,
  .p2,
  .p3 {
    width: 25%;
    margin-right: 20px;
    float: left;
  }
  .heading {
    position: relative;
    margin: 15px 0;
    padding: 0px 8px;
    border-left: 3px solid #fa6900;
    .h5 {
      // width: 20%;
    }
    .line {
      position: absolute;
      right: 0;
      bottom: -5px;
      left: 0;
      height: 0;
      border-bottom: 2px solid #ddd;
    }
  }
  .list {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        cursor: pointer;
        padding: 5px;
        line-height: 36px;
        .editBtn-box {
          display: inline-block;
          text-align: right;
          float: right;
          display: none;
        }
        .editingBox {
          display: flex;
        }
        .editInput {
          flex-grow: 1;
        }
        .editingBtn {
          margin-left: 10px;
          flex-shrink: 0;
        }
      }
      li:hover {
        background-color: #d6d6d6;
        .editBtn-box {
          display: block;
        }
      }
      li.active {
        background-color: #d6d6d6;
      }
    }
    .addContentBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .addContent-hint {
        flex-shrink: 0;
      }
      .addContent-input {
        flex-grow: 1;
      }
      .addContent-btn {
        flex-shrink: 0;
        margin-left: 10px;
      }
    }
  }
}
</style>
